<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.css" rel="stylesheet" />
		<style type="text/css">
			.mui-bar { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .1); box-shadow: 0 0 1px rgba(0, 0, 0, .1); background: #fdfdfd;color: #fff;}
			.mui-bar a { color: #fff;}
			.mui-bar a:active,.mui-bar a:hover { color: #fff; opacity: 1 !important;}
			.mui-bar .mui-title { color: #000000;}
			.mui-bar-nav{background-color:#FED000 ;}
			/*九宫格*/
			@font-face {font-family: "iconfont"; src: url('fonts/iconfonts.ttf') format('truetype');}
			.iconfont { font-family:"iconfont" !important; font-size:20px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
			.icon-iconjib:before { content: "\e604";}
			.icon-lishi:before { content: "\e614"; position: relative; top: 1px; }
			.icon-kongjian:before { content: "\e60b"; }
			.icon-shoucang:before { content: "\e6b7"; }
			.icon-jinbi:before { content: "\e69f"; position: relative; top: -3px; }
			.icon-wodexiazai:before { content: "\e6bf"; }
			.icon-wudui:before { content: "\e61a"; }
			.icon-message:before { content: "\e680"; position: relative; left: 0px; }
			.mui-table-view  { background: #fff !important; padding: 10px 0 !important;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell { border: 0; padding: 0 15px;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) { padding: 5px 0;}
			.mui-table-view .iconfont { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 100%;  text-align: center; background: #1E9FFF; color: #fff; }
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body { font-size: 12px;}
			.mui-table-view .icon-iconjib { background: #008040; }
			.mui-table-view .icon-lishi { background: #FF00FF; font-size: 24px;}
			.mui-table-view .icon-kongjian { background: #FF9800; }
			.mui-table-view .icon-shoucang { background: #8080C0; }
			.mui-table-view .icon-jinbi { background: #8a6de9; font-size: 24px;}
			.mui-table-view .icon-wodexiazai { background: #4cd964; font-size: 24px; }
			.mui-table-view .icon-wudui { background: #FF5722; }
			.mui-table-view .icon-message { background: #007aff; font-size: 24px;}
			.con_list { margin-top: 10px; background: #fff;}
			.con_list .mui-table-view { padding: 4px 0 10px !important;}
			.con_list .mui-table-view:before,.con_list .mui-table-view:after { background: #eee;}
			.con_list h5 { color: #FA9101; padding: 10px 0 2px 10px;}
			.con_list h5 .mui-icon { vertical-align: middle; position: relative; top: -1px; margin-right: 4px;}
			.con_list .mui-media-body { text-align: left; line-height: 18px !important; margin-top: 0 !important; word-break: break-all;white-space:normal; height: 36px !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  overflow: hidden; }
			.con_list h6 { overflow: hidden; padding:2px 0 10px 0;}
			.con_list h6 a { width: 50%; float: left; text-align: center; color: #FA9101; position: relative;}
			.con_list h6 a:first-child:before { content: ""; display: inline-block; height: 100%; width: 1px; background: #eee; position: absolute; right: 0; top: 0; }
			.con_list h6 a .mui-icon { vertical-align: middle; position: relative; top: -1px; margin-left: 4px;}
			.con_list span { position: absolute;left:0;bottom: 40px; color: #fff; font-size: 12px; padding-left: 20px;}
			.con_list span i { font-style: normal; display: inline-block;border: 1px #fff solid; border-radius: 100%; width: 14px; padding-left: 2px; height: 14px; line-height: 14px; text-align: center; font-size: 6px; margin-right: 3px; position: relative; top: -2px;}
			@media only screen and (max-width: 320px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 119px;}
			}
			@media only screen and (max-width: 360px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 133px;}
			}
			@media only screen and (max-width: 414px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 153px;}
			}
			@media only screen and (min-width: 415px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 160px;}
			}
			@media only screen and (min-width: 640px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 284px;}
			}
			@media only screen and (min-width: 1000px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 379px;}
			}
			
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">标题</h1>
		</header>
		
		<div class="mui-content">
			
			<div >
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#" id="classify">
					        <span class="iconfont icon-kongjian"></span>
					        <div class="mui-media-body">我的空间</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#">
					        <span class="iconfont icon-wudui"></span>
					        <div class="mui-media-body">我的舞队</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#">
					        <span class="iconfont icon-wodexiazai"></span>
					        <div class="mui-media-body">我的下载</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#">
					        <span class="iconfont icon-shoucang"></span>
					        <div class="mui-media-body">我的收藏</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#">
					        <span class="iconfont icon-message"></span>
					        <div class="mui-media-body">消息中心</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#">
					        <span class="iconfont icon-lishi"></span>
					        <div class="mui-media-body">观看历史</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a href="#">
					        <span class="iconfont icon-iconjib"></span>
					        <div class="mui-media-body">金币商城</div>
					    </a>
					</li>
				</ul>
			</div>
			<!--<div style="margin-top:28px;">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:void();" class="mui-navigate-right">其他功能</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:void();" class="mui-navigate-right">其他功能</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:void();" class="mui-navigate-right">其他功能</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:void();" class="mui-navigate-right">其他功能</a>
					</li>
				</ul>
			</div>
			<div style="margin-top:28px;">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:logoff();" class="mui-navigate-right">退出登录</a>
					</li>
				</ul>
			</div>-->
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: false
			});
			mui.plusReady(function(){
			});
		</script>
	</body>

</html>